<script setup>
import headerBar from '@/components/header/index.vue';
import { ref } from 'vue';
import TextBlock from '@/view/ai/components/TextBlock.vue';
import RecommendDCard from '@/view/ai/components/RecommendDCard.vue';
import PolicyTab from '@/view/ai/components/askAnswer/PolicyTab.vue';
import NewsTab from '@/view/ai/components/askAnswer/NewsTab.vue';
import InputAsk from '@/view/ai/components/askAnswer/InputAsk.vue';
import Guide from '@/view/ai/components/guide/Guide.vue';
import RecordsList from '@/view/ai/components/record/RecordsList.vue';
import FunctionUnderDevelopment from '@/view/ai/components/FunctionUnderDevelopment.vue';
import CategoryList from '@/view/ai/components/askAnswer/CategoryList.vue';
import TitleContentCard from '@/view/ai/components/TitleContentCard.vue';
import PolicyTabOfRecommend from '@/view/ai/components/recommend/PolicyTabOfRecommend.vue';
import Gap from '@/view/ai/components/Gap.vue';
const leftSelectedIndex = ref(0)
const leftArea = ref([
	{
		title: '推荐',
		iconNumber:1,
		width:'30px',
		height:'31px',
	},
	{
		title: '问答',
		iconNumber:2,
		width:'30px',
		height:'28px',
	},
	{
		title: '学习',
		iconNumber:3,
		width:'30px',
		height:'32px',
	},
	{
		title: '专业工具',
		iconNumber:5,
		width:'30px',
		height:'30px',
	},
	{
		title: '记录',
		iconNumber:6,
		width:'30px',
		height:'30px',
	},
	{
		title: '指南',
		iconNumber:7,
		width:'30px',
		height:'30px',
	},
])
const textBlockConfig = ref([
	{ text: '惊艳！这款化妆品让你瞬间焕发光彩1' },
	{ text: '惊艳！这款化妆品让你瞬间焕发光彩2' },
	{ text: '惊艳！这款化妆品让你瞬间焕发光彩3' },
	{ text: '惊艳！这款化妆品让你瞬间焕发光彩4' },
	{ text: '惊艳！这款化妆品让你瞬间焕发光彩化妆品让你瞬间焕发光彩' },
]);
const leftItemClick= (index)=>{
	leftSelectedIndex.value = index
}
const jumpAskAnswer = (item)=>{
	// 跳到问答
	console.log(item)
}


</script>
<template>
	<div class="container">
		<header-bar :index="0"></header-bar>
		<div class="ai">
			<div class="ai-left">
				<div class="ai-left-tool">
					<div class="ai-left-tool-item" @click="leftItemClick(index)" :class="leftSelectedIndex===index?'selected':''" v-for="(item,index) in leftArea" :key="item.title">
						<div class="icon" :class="['icon'+item.iconNumber,leftSelectedIndex===index?'iconSelected':'']" :style="{height:item.height,width:item.width}" />
						<div class="title" :class="[leftSelectedIndex===index? 'titleSelected':'']">{{item.title}}</div>
					</div>
				</div>
				<category-list  v-if="leftSelectedIndex === 1" />
				<records-list v-else-if="leftSelectedIndex === 4" />
			</div>

			<div class="ai-right" :class="leftSelectedIndex === 1 ? 'right-is-ask-answer' : leftSelectedIndex === 4 ? 'right-is-record' : ''">
				<template v-if="leftSelectedIndex === 0">
					<!--				推荐-->
					<title-content-card title="推荐">
						<template #content>
							<div class="text-block-wrap">
								<text-block @click="jumpAskAnswer(item)" v-for="(item,index) in textBlockConfig" :key="index" :text="item.text"/>
							</div>
							<div>
								<recommend-d-card />
							</div>
						</template>
					</title-content-card>
					<gap height="30"/>
					<policy-tab-of-recommend/>
				</template>

<!--				问答-->
				<template v-if="leftSelectedIndex === 1">
					<policy-tab/>
					<news-tab/>
					<input-ask/>
				</template>
				<function-under-development v-if="leftSelectedIndex===2 || leftSelectedIndex === 3" />
				<template v-if="leftSelectedIndex===4">
					<policy-tab/>
					<news-tab/>
				</template>
				<guide v-else-if="leftSelectedIndex === 5"/>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.container {
	width: 100%;
	background: url(../../assets/images/ai-bg.png) repeat 0 0/cover;
}

.ai {
	//height: calc(100vh - 85px);
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	.ai-left {
		display: flex;

		.ai-left-tool {
			width: 100px;
			padding: 40px 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;

			.ai-left-tool-item {
				cursor: pointer;
				margin-bottom: 30px;
				display: flex;
				flex-direction: column;
				align-items: center;

				.icon {
					&.icon1{
						background: url(../../assets/icons/ai-tool-1.png) no-repeat center center/100%;
						&.iconSelected{
							background: url(../../assets/icons/ai-tool-1-a.png) no-repeat center center/100%;
						}
					}
					&.icon2{
						background: url(../../assets/icons/ai-tool-2.png) no-repeat center center/100%;
						&.iconSelected{
							background: url(../../assets/icons/ai-tool-2-a.png) no-repeat center center/100%;
						}
					}
					&.icon3{
						background: url(../../assets/icons/ai-tool-3.png) no-repeat center center/100%;
						&.iconSelected{
							background: url(../../assets/icons/ai-tool-3-a.png) no-repeat center center/100%;
						}
					}
					&.icon5{
						background: url(../../assets/icons/ai-tool-5.png) no-repeat center center/100%;
						&.iconSelected{
							background: url(../../assets/icons/ai-tool-5-a.png) no-repeat center center/100%;
						}
					}
					&.icon6{
						background: url(../../assets/icons/ai-tool-6.png) no-repeat center center/100%;
						&.iconSelected{
							background: url(../../assets/icons/ai-tool-6-a.png) no-repeat center center/100%;
						}
					}
					&.icon7{
						background: url(../../assets/icons/ai-tool-7.png) no-repeat center center/100%;
						&.iconSelected{
							background: url(../../assets/icons/ai-tool-7-a.png) no-repeat center center/100%;
						}
					}
				}

				.title {
					&.titleSelected{
						color: #00BCFB;
					}
					font-size: 18px;
					color: rgba(0,0,0,0.5);
					line-height: 21px;
					margin-top: 8px;
				}
			}

			&-item:hover{
				.icon {
					&.icon1{
						background: url(../../assets/icons/ai-tool-1-a.png) no-repeat center center/100%;
					}
					&.icon2{
						background: url(../../assets/icons/ai-tool-2-a.png) no-repeat center center/100%;
					}
					&.icon3{
						background: url(../../assets/icons/ai-tool-3-a.png) no-repeat center center/100%;
					}
					&.icon5{
						background: url(../../assets/icons/ai-tool-5-a.png) no-repeat center center/100%;
					}
					&.icon6{
						background: url(../../assets/icons/ai-tool-6-a.png) no-repeat center center/100%;
					}
					&.icon7{
						background: url(../../assets/icons/ai-tool-7-a.png) no-repeat center center/100%;
					}
				}

				.title {
					color: #00BCFB;
				}
			}

		}
	}
	.ai-center{
		width: 200px;
	}

	&-right {
		box-sizing: border-box;
		padding: 40px 100px;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		&.right-is-record,
		&.right-is-ask-answer{
			padding-left: 40px;
			padding-right: 40px;
		}
		.text-block-wrap{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
	}
}







</style>

